<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title></title> 
  <link rel="shortcut icon" href="favicon.ico" /> 
  <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet" /> 
  <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet" /> 
  <link href="../css/style.css?v=4.1.0" rel="stylesheet" /> 
 </head> 
 <body class="gray-bg"> 
  <div class="wrapper wrapper-content animated fadeInRight"> 
     <div class="ibox float-e-margins"> 
      <div class="ibox-content"> 
       <div class="ibox-search row" id="mySearchVM"> 
        <div class="col-sm-3"> 
         <button type="button" class="btn btn-sm btn-primary" @click="add()"> <i class="glyphicon glyphicon-plus"></i> 新增</button> 
        </div> 
        <div class="col-sm-2"> 
         <input type="text" placeholder="请输入名称" class=" input-sm form-control" v-model="qo.fUserName" /> 
        </div> 
        <div class="col-sm-2"> 
         <button type="button" class="btn btn-sm btn-primary" @click="query(1)"><i class="fa fa-search"></i> 搜索</button> 
         <button type="button" class="btn btn-sm btn-refresh" onclick="resetLoad()"><i class="fa fa-refresh"></i> 刷新</button>
        </div> 
       </div> 
       <table class="table dataTable table-striped table-bordered table-hover "> 
        <thead id="sortThead"> 
         <tr> 
          <th>#</th> 
          <th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>

          <th>操作</th> 
         </tr> 
        </thead> 
        <!-- 修改3 显示字段 -->
        <tbody id="itemTable"> 
         <tr v-for="(item, index) in records" v-cloak> 
          <td>{{index + 1}}</td> 
          <td>{{item.fId}}</td>
<td>{{item.bookName}}</td>
<td>{{item.bookSubtitle}}</td>
<td>{{item.year}}</td>
<td>{{item.abstract}}</td>
<td>{{item.authors}}</td>
<td>{{item.publisher}}</td>
<td>{{item.pages}}</td>
<td>{{item.fPublishDate}}</td>

          <td> <a @click="modify(item)"> <i class="fa fa-edit"></i> 编辑</a>&nbsp;&nbsp; <a @click="remove(item.pId)"> <i class="fa fa-remove"></i> 删除</a> </td> 
         </tr> 
        </tbody> 
       </table> 
       
       <div id="pagin" class="row" v-cloak> 
        <div class="col-sm-5">
         显示 {{startIndex}} 到 {{endIndex}} 条，共 {{totalCount}} 条记录
        </div> 
        <div class="col-sm-1"> 
         <select class="form-control m-b" @change="setPageSize()" v-model="pageSize"> <option value="10">10条</option> <option value="20">20条</option> <option value="50">50条</option> </select> 
        </div> 
        <div class="col-sm-6"> 
         <div class="paging_simple_numbers pull-right"> 
          <ul class="pagination"> 
           <li class="paginate_button previous disabled" v-if="pageNo == 1"><a @click="query('pre')">上一页</a></li> 
           <li class="paginate_button previous" v-else=""><a @click="query('pre')">上一页</a></li> 
           <template v-for="n in showPages"> 
            <li class="paginate_button active" v-if="n == pageNo"><a @click="query(n)">{{n}}</a></li> 
            <li class="paginate_button" v-else=""><a @click="query(n)">{{n}}</a></li> 
           </template> 
           <li class="paginate_button next disabled" v-if="pageNo == totalPage"><a @click="query('next')">下一页</a></li> 
           <li class="paginate_button next" v-else=""><a @click="query('next')">下一页</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
       
      </div> 
     </div> 
  </div>
  
  <!-- 修改2 增加修改 字段 -->
  <div id="layerOpenData" class="layer-open-div">
  	<div class="layer-open-from">
	    <div class="input-group m-b">
   <span class="input-group-addon"></span>
   <input type="text" class="form-control" v-model="item.fId">
</div>
<div class="input-group m-b">
   <span class="input-group-addon"></span>
   <input type="text" class="form-control" v-model="item.bookName">
</div>
<div class="input-group m-b">
   <span class="input-group-addon"></span>
   <input type="text" class="form-control" v-model="item.bookSubtitle">
</div>
<div class="input-group m-b">
   <span class="input-group-addon"></span>
   <input type="text" class="form-control" v-model="item.year">
</div>
<div class="input-group m-b">
   <span class="input-group-addon"></span>
   <input type="text" class="form-control" v-model="item.abstract">
</div>
<div class="input-group m-b">
   <span class="input-group-addon"></span>
   <input type="text" class="form-control" v-model="item.authors">
</div>
<div class="input-group m-b">
   <span class="input-group-addon"></span>
   <input type="text" class="form-control" v-model="item.publisher">
</div>
<div class="input-group m-b">
   <span class="input-group-addon"></span>
   <input type="text" class="form-control" v-model="item.pages">
</div>
<div class="input-group m-b">
   <span class="input-group-addon"></span>
   <input type="text" class="form-control" v-model="item.fPublishDate">
</div>

    </div>
    
    <div class="layer-open-commit">
		<button type="button" class="btn btn-primary .btn-lg" @click="submitForm()">提 交</button>
	</div>
    
  </div>
  
  
  <!-- 全局js --> 
  <script src="../js/jquery.min.js?v=2.1.4"></script> 
  <script src="../js/polyfill.min.js?v=3.3.6"></script> 
  <script src="../js/bootstrap.min.js?v=3.3.6"></script>
  <script src="../js/content.js?v=1.0.0"></script> 
  <script src="../js/vue.min.js"></script> 
  <script src="../js/plugins/layer/layer.min.js"></script> 
  
  
  
  <!-- 自定义js --> 
  <script src="../js/gAjax.js"></script> 
  <script src="../js/pagin.js"></script> 
  <script type="text/javascript">
		/**
		* 搜索区
		* 以 searchVM 为 变量，不可变
		*/
		
		//修改1：请求空间
		var urlSpace = "scholarBook",
		
		urlEmnu = {
			urlPage: urlSpace + "/query/page",
			urlRemove: urlSpace + "/remove",
			urlModify: urlSpace + "/modify",
			urlCreate: urlSpace + "/create"
		};
		
		var searchVM = new Vue({
			el : '#mySearchVM',
			data: {
				qo: {}
			},
			methods: {
				//	查询
			    query: function (pageNo) {
			    	//	qo对象内嵌对象形式转换以便springmvc解析参数
			    	var queryQ = this.qo;
			    	
			    	if(queryQ.pageNo == '...') {
			    		return false;
			    	}
			    	//	来自搜索按钮触发，要重新搜第一页。否则就是来自分页控件触发
			    	if(pageNo == 1) {
			    		this.qo.pageNo = 1;
			    	}
			    	var index = layer.load(1, {
		    		  shade: [0.1,'#fff']
		    		});
			    	gAjax.request(urlEmnu.urlPage,queryQ).then(function(result){
			    		itemTableVM.records = result.records;
						paginVM.refresh(result);
						layer.close(index);
			    	});
			    	
			    },
			    add: function(){
			    	layerOpenDataVM.item = {};
			    	openLayer("layerOpenData", '800px', '500px');
		    	}
			}
		});
		
		/**
		* 搜索区
		* 以 itemTableVM 为 变量，不可变
		*/
		var itemTableVM = new Vue({
			data: {
				records:[]
			},
			el : '#itemTable',
			mounted: function () {
				searchVM.query(0);
		    },
		    methods: {
		    	modify: function(item) {
		    		layerOpenDataVM.item = item;
		    		openLayer("layerOpenData", '800px', '500px');
		    	},
		    	remove: function(_pId) {
		    		layer.confirm('你确定要删除？', {
		    		  btn: ['确定','取消']
		    		}, function(){
		    			gAjax.request(urlEmnu.urlRemove,{pId: _pId}).then(function(result){
			    			layer.msg('删除成功！', {icon: 1});
			    			searchVM.query(0);
				    	});
		    			
		    		});
		    	}
		    }
		});
		
		/**
		* 搜索区
		* 以 layerOpenDataVM 为 变量，不可变
		*/
		var layerOpenDataVM = new Vue({
			el : '#layerOpenData',
			data: {
				item: {}
			},
		    methods: {
		    	submitForm: function(){
		    		var url= (this.item.pId ? urlEmnu.urlModify : urlEmnu.urlCreate);
		    		gAjax.request(url,this.item).then(function(result){
		    			layer.closeAll();
		    			layer.msg('操作成功！', {icon: 1});
		    			searchVM.query(0);
			    	});
		    	}
		    }
		});
		
	</script>  
 </body>
</html>